<template>
  <div class="info-container">
    <!-- 导航栏 -->
    <van-nav-bar title="我的资料" @click-left="$router.push('/my')">
      <template #left>
        <i class="iconfont iconbtn_nav_back"></i>
      </template>
    </van-nav-bar>
    <!-- 主体区域 -->
    <div class="main-box">
      <!-- 头像 -->
      <van-cell
        @click="toEdit('avatar')"
        class="icon-cell my-cell"
        title="头像"
      >
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <i class="iconfont iconicon_more"></i>
        </template>
        <template>
          <img class="avatar" :src="userInfo && userInfo.avatar" alt="" />
        </template>
      </van-cell>
      <!-- 信息 -->
      <van-cell-group>
        <van-cell
          :border="false"
          class=" my-cell"
          title="昵称"
          :value="userInfo && userInfo.nickname"
          @click="toEdit('nickname')"
        >
          <template #right-icon>
            <i class="iconfont iconicon_more"></i>
          </template>
        </van-cell>
        <van-cell
          :border="false"
          class=" my-cell"
          title="性别"
          @click="showGenderPicker = true"
          :value="userInfo && userInfo.gender | formatGender"
        >
          <template #right-icon>
            <i class="iconfont iconicon_more"></i>
          </template>
        </van-cell>
        <van-cell
          :border="false"
          class=" my-cell"
          title="地区"
          :value="(userInfo && userInfo.area) || '未知'"
          @click="showAreaPicker = true"
        >
          <template #right-icon>
            <i class="iconfont iconicon_more"></i>
          </template>
        </van-cell>
        <van-cell
          :border="false"
          class=" my-cell"
          title="个人简介"
          :value="userInfo && userInfo.intro"
          @click="toEdit('intro')"
        >
          <template #right-icon>
            <i class="iconfont iconicon_more"></i>
          </template>
        </van-cell>
      </van-cell-group>
      <!-- 底部按钮 -->
      <van-button @click="logout" class="logout-btn">退出登录</van-button>
      <!-- 性别选择弹出层 -->
      <van-popup v-model="showGenderPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="genderColumns"
          @confirm="onGenderConfirm"
          @cancel="showGenderPicker = false"
          :default-index="userInfo && userInfo.gender"
        />
      </van-popup>
      <!-- 城市选择弹出层 -->
      <van-popup v-model="showAreaPicker" position="bottom">
        <van-area
          title="标题"
          @confirm="onAreaConfirm"
          @cancel="showAreaPicker = false"
          :area-list="areaList"
          :columns-num="2"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
// 导入 vuex的辅助函数
import { mapActions, mapState, mapMutations } from 'vuex'
// 导入 token工具函数
import { removeLocal } from '../../utils/local'
// 导入接口
import { edit } from '../../api/api'
// 导入省市区数据
import areaList from '../../utils/cityData'
export default {
  name: 'info',
  data () {
    return {
      // 是否显示性别选择器
      showGenderPicker: false,
      // 性别选项
      genderColumns: ['未知', '男孩子', '女孩子'],
      // 是否显示城市选择器
      showAreaPicker: false,
      // 性别
      gender: '',
      // 省市区数据
      areaList
    }
  },
  async created () {
    // 获取用户信息
    await this.getUserInfo()
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    ...mapActions(['getUserInfo']),
    ...mapMutations(['SETUSERINFO']),
    // 确认了性别
    async onGenderConfirm (item, index) {
      // 修改数据
      await edit({
        gender: index
      })
      // 重新获取数据
      await this.getUserInfo(true)
      this.$toast.success('性别修改成功')
      // 关闭弹出框
      this.showGenderPicker = false
    },
    // 确认了城市
    async onAreaConfirm (items) {
      // console.log(item)
      // 修改数据
      await edit({
        // 修改城市
        area: items[1].name
      })
      // 重新获取数据
      await this.getUserInfo(true)
      this.$toast.success('城市修改成功')
      // 关闭弹出框 `
      this.showAreaPicker = false
    },
    // 用户登出
    logout () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '确认退出?'
        })
        .then(() => {
          // 移除用户信息
          this.SETUSERINFO(undefined)
          // 移除token
          removeLocal()
          // 去发现页
          this.$router.push('/find')
        })
        .catch(() => {
          // on cancel
        })
    },
    // 去编辑页
    toEdit (e) {
      this.$router.push('/editInfo?property=' + e)
    }
  }
}
</script>

<style lang="less">
.info-container {
  background-color: @bgColor;
  height: 100vh;
  .van-nav-bar__left {
    padding-left: 0;
  }
  .iconbtn_nav_back {
    font-size: 44px;
  }
  .main-box {
    padding: 15px;
  }
  .icon-cell {
    border-radius: 8px;
  }
  .my-cell {
    height: 55px;
    align-items: center;
    .iconfont:first-child {
      font-size: 22px;
      margin-right: 12px;
    }

    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    .iconfont:last-child {
      font-size: 10px;
      margin-left: 9px;
      color: #5b5d75;
    }
  }
  .icon-cell {
    .van-cell__value {
      padding-top: 5px;
    }
  }
  .van-cell-group {
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
  }
  .logout-btn {
    width: 100%;
    border-radius: 8px;
    color: #e40137;
    margin-top: 10px;
  }
}
</style>
